<template>
    <div id="verifyDiary">
        <div class="header">
            <el-button type="primary" size="mini" @click="GetDiaryList">刷新数据</el-button>
            <el-button type="primary" size="mini" @click="onlyIsPassed = !onlyIsPassed" width="100">
                {{ !onlyIsPassed ? '显示未通过' : '显示全部' }}
            </el-button>
        </div>
        <div class="main">
            <el-table :data="diaryDataList" border stripe>
                <el-table-column prop="id" label="编号" width="200" align="center"></el-table-column>
                <el-table-column prop="userName" label="用户名" width="200" align="center"></el-table-column>
                <el-table-column prop="issueTime" label="发布时间" width="200" align="center">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row.issueTime | dateFormat('yy-mm-dd hh24:mi:ss') }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地址" width="200" align="center"></el-table-column>
                <el-table-column prop="introduction" label="介绍" width="300" align="center"
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="isPassed" label="状态" width="100" align="center">
                    <template slot-scope="scope">
                        <span class="main-table-span"
                            :style="scope.row.isPassed ? 'background-color: green;' : 'background-color: red;'">
                            {{ dict.filter(item => item.value == scope.row.isPassed)[0]?.label }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="introduction" label="照片" min-width="100" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.introductionSrc" alt="" class="main-table-img">
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" :disabled="scope.row.isPassed == 1"
                            @click="PassDiary(scope.row, true)">通过</el-button>
                        <el-button type="danger" size="mini" :disabled="scope.row.isPassed == 0"
                            @click="PassDiary(scope.row, false)">撤回</el-button>
                    </template>
                </el-table-column>

            </el-table>

        </div>
    </div>
</template>

<script>
    export default {
        name: 'verifyDiary',
        data() {
            return {
                diaryDataList: [],
                onlyIsPassed: false,
                dict: [
                    {
                        value: false,
                        label: '未通过',
                        bgc: 'red'
                    },
                    {
                        value: true,
                        label: '已通过',
                        bgc: 'green'
                    }
                ]
            }
        },
        watch: {
            onlyIsPassed() {
                this.GetDiaryList()
            }
        },
        methods: {
            GetDiaryList() {
                let loading = this.$loading({
                    text: '加载数据中',
                    target: '#verifyDiary'
                })
                this.$GET('/diary/GetAllDiaryList', { state: this.onlyIsPassed }).then(res => {
                    this.diaryDataList = res.data.data
                }).catch(_ => { }).finally(_ => {
                    setTimeout(() => {
                        loading.close()
                    }, 200)
                })
            },
            // 通过伴宠日记
            PassDiary(row, state) {
                let loading = this.$loading({
                    text: '加载数据中',
                    target: '#verifyDiary'
                })
                this.$PUT('/diary/updateDiary', { model: row, columns: { isPassed: state } }).then(res => {
                    this.$message({
                        duration: 1000,
                        type: 'success',
                        message: res.data.msg
                    })
                    this.GetDiaryList()
                }).catch(_ => { }).finally(_ => {
                    setTimeout(() => {
                        loading.close()
                    }, 200)
                })
            }
        },
        mounted() {
            this.GetDiaryList()
        }
    }
</script>

<style scoped lang="less">
    #verifyDiary {
        width: 100%;
        height: 100%;

        .header {
            width: 100%;
            height: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;

            button {
                margin: 10px;
            }
        }

        .main-table-span {
            display: inline-block;
            width: 60px;
            height: 50px;
            line-height: 50px;
            border: 1px solid var(--main-color-border);
            border-radius: 25%;
            background-color: var(--main-bg-color);
            color: var(--main-font-color);
        }

        .main-table-img {
            width: 80px;
            height: 80px;
            object-position: center;
            object-fit: cover;
        }
    }
</style>